<template>
  <div class="wrap">
    <header>2019级新生报到情况表</header>
    <tab active-color="#37aefc"
         bar-active-color="#37aefc">
      <tab-item selected
                class="tab-item">报到情况</tab-item>
      <tab-item class="tab-item"
                @on-item-click="$router.push('/admin/dormInfo')">宿舍情况
      </tab-item>
    </tab>
    <p class="time">截至统计时间：{{allStatus.time}}</p>
    <div style="margin:20px auto;">
      <flexbox>
        <flexbox-item>
          <div class="flex-box">录取人数：{{allStatus.admissionSum}}</div>
        </flexbox-item>
        <flexbox-item>
          <div class="flex-box">报到人数：{{allStatus.comersSum}}</div>
        </flexbox-item>
        <flexbox-item>
          <div class="flex-box">报到率：{{allStatus.comersRateSum}}</div>
        </flexbox-item>
      </flexbox>
      <flexbox>
        <flexbox-item>
          <div class="flex-content">男生录取人数：{{allStatus.admissionManSum}}</div>
        </flexbox-item>
        <flexbox-item>
          <div class="flex-content">男生报到人数：{{allStatus.comersManSum}}</div>
        </flexbox-item>
        <flexbox-item>
          <div class="flex-content">男生报到率：{{allStatus.comersRateManSum}}</div>
        </flexbox-item>
      </flexbox>
      <flexbox>
        <flexbox-item>
          <div class="flex-content">女生录取人数：{{allStatus.admissionWomanSum}}</div>
        </flexbox-item>
        <flexbox-item>
          <div class="flex-content">女生报到人数：{{allStatus.comersWomanSum}}</div>
        </flexbox-item>
        <flexbox-item>
          <div class="flex-content">女生报到率：{{allStatus.comersRateWomanSum}}</div>
        </flexbox-item>
      </flexbox>
    </div>
    <button-tab>
      <button-tab-item @click.native="toDepartment">院系查看</button-tab-item>
      <button-tab-item selected>专业查看</button-tab-item>
    </button-tab>
    <button-tab>
      <button-tab-item @click.native="getManReport">男</button-tab-item>
      <button-tab-item selected
                       @click.native="getAllReport">总</button-tab-item>
      <button-tab-item @click.native="getWomanReport">女</button-tab-item>
    </button-tab>
    <div id="main"
         style="width: 100%; height: 280px;">
    </div>
    <flexbox style="position:relative;">
      <x-button style="background:rgb(57, 147, 236); color:#fff; margin-bottom: 20px;"
                @click.native="isFold"
                :text="text"
                mini></x-button>
      <p class="copyright"
         ref="copyright">技术支持&copy;三月软件小组</p>
    </flexbox>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "查看全部",
      allStatus: [],
      rateData: [],
      majorAbbreviation: [],
      classes: [],
      rate: [],
      someRate: [],
      someData: [],
      someMajorAbbreviation: []
    };
  },
  mounted() {
    // 获取上方报到人数及比例
    this.axios({
      method: "get",
      url: "/student/getAllStatus"
    })
      .then(res => {
        if (res.data.code == 0) {
          this.allStatus = res.data.result;
        } else if (res.data.code == 2) {
          this.$router.push("/admin/login");
        }
      })
      .catch(error => {
        console.log(error);
      });
    this.getReport(0);
  },
  methods: {
    toDepartment() {
      this.$vux.loading.show({
        text: "Loading"
      });
      setTimeout(() => {
        this.$vux.loading.hide();
        this.$router.push("/admin/departmentChart");
      }, 300);
    },
    // 查询报到率
    getReport(sex) {
      this.axios({
        method: "get",
        url: "/student/showCACRate",
        params: {
          type: 1,
          sex: sex
        }
      })
        .then(res => {
          if (res.data.code == 0) {
            this.rateData = res.data.result;
            this.rate = [];
            this.majorAbbreviation = [];
            this.classes = [];
            for (let i = 0; i < this.rateData.length; i++) {
              this.rate.push(this.rateData[i].rate);
              this.majorAbbreviation.push(this.rateData[i].majorAbbreviation);
              this.classes.push(this.rateData[i].classes);
            }
            this.someRate = this.rate.slice(0, 3).concat(this.rate.slice(-3));
            // 在名称前边增添了序号（创建了一个新的数组）
            this.majorAbbreviation.forEach(function(value, key, array) {
              array[key] = "(" + (array.length - key) + ")" + value;
            });
            this.someMajorAbbreviation = this.majorAbbreviation
              .slice(0, 3)
              .concat(this.majorAbbreviation.slice(-3));
            this.someData = this.rateData
              .slice(0, 3)
              .concat(this.rateData.slice(-3));
            this.drawLine();
            localStorage.setItem("sex", sex);
          } else {
            console.log(res.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 查询全部报到率
    getAllReport() {
      if (this.text == "折叠") {
        this.isFold();
      }
      this.getReport(0);
    },
    // 查询男生报到率
    getManReport() {
      if (this.text == "折叠") {
        this.isFold();
      }
      this.getReport(1);
    },
    // 查询女生报到率
    getWomanReport() {
      if (this.text == "折叠") {
        this.isFold();
      }
      this.getReport(2);
    },
    drawLine() {
      let _this = this;
      let myChart = this.echarts.init(document.getElementById("main"));
      let option = {
        color: ["#37A2DA"],
        title: {
          text: "各专业报到率",
          textAlign: "center",
          left: "50%",
          top: "10%",
          textStyle: { color: "rgba(102, 102, 102, 1)", fontSize: "12px" }
        },
        grid: {
          containLabel: true,
          left: "5%",
          bottom: 0,
          top: "20%",
          right: "5%"
        },
        xAxis: {
          type: "value",
          data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
          axisLabel: {
            interval: 0,
            rotate: 40
          }
        },
        yAxis: {
          type: "category",
          axisLabel: {
            interval: 0
          }
        },
        series: [
          {
            type: "bar",
            label: {
              normal: {
                show: true,
                position: "inside",
                formatter: "{c} %"
              }
            }
          }
        ]
      };
      myChart.on("click", function(param) {
        let fullName;
        if (_this.text == "查看全部") {
          fullName = _this.someData[param.dataIndex];
        } else {
          fullName = _this.rateData[param.dataIndex];
        }
        localStorage.setItem("name", fullName.name);
        localStorage.setItem("type", 1);
        _this.$router.push("/admin/details");
      });
      option.yAxis.data = this.someMajorAbbreviation;
      option.grid.top = "25%";
      option.series[0].data = this.someRate;
      myChart.setOption(option);
    },
    isFold() {
      let myChart = this.echarts.init(document.getElementById("main"));
      let option = {
        color: ["#37A2DA"],
        title: {
          text: "各专业报到率",
          textAlign: "center",
          left: "50%",
          top: "10%",
          textStyle: { color: "rgba(102, 102, 102, 1)", fontSize: "12px" }
        },
        grid: {
          containLabel: true,
          left: "5%",
          bottom: 0,
          top: "20%",
          right: "5%"
        },
        xAxis: {
          type: "value",
          data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
          axisLabel: {
            interval: 0,
            rotate: 40
          }
        },
        yAxis: {
          type: "category",
          axisLabel: {
            interval: 0
          }
        },
        series: [
          {
            type: "bar"
          }
        ]
      };
      if (this.text == "折叠") {
        this.text = "查看全部";
        option.grid.top = "25%";
        option.yAxis.data = this.someMajorAbbreviation;
        option.series[0].data = this.someRate;
        myChart.setOption(option);
        let autoHeight = this.someMajorAbbreviation.length * 40;
        myChart.getDom().style.height = autoHeight + "px";
        myChart.getDom().childNodes[0].style.height = autoHeight + "px";
        myChart
          .getDom()
          .childNodes[0].childNodes[0].setAttribute("height", autoHeight);
        myChart.getDom().childNodes[0].childNodes[0].style.height =
          autoHeight + "px";
        myChart.resize();
        this.$refs.copyright.style.display = "block";
      } else {
        this.text = "折叠";
        option.grid.top = "1%";
        option.title.text = "";
        option.yAxis.data = this.majorAbbreviation;
        option.series[0].data = this.rate;
        myChart.setOption(option);
        let autoHeight = this.majorAbbreviation.length * 25;
        myChart.getDom().style.height = autoHeight + "px";
        myChart.getDom().childNodes[0].style.height = autoHeight + "px";
        myChart
          .getDom()
          .childNodes[0].childNodes[0].setAttribute("height", autoHeight);
        myChart.getDom().childNodes[0].childNodes[0].style.height =
          autoHeight + "px";
        myChart.resize();
        this.$refs.copyright.style.display = "none";
      }
    }
  }
};
</script>

<style lang="less" scoped>
.wrap {
  background: linear-gradient(#fff, #afd0e4);
}
header {
  height: 60px;
  line-height: 60px;
  font-size: 21px;
  text-align: center;
  letter-spacing: 1px;
  color: #fff;
  background-color: rgba(11, 83, 155, 1);
}
.time {
  letter-spacing: 1px;
  font-size: 12px;
  text-align: center;
  margin: 15px 0;
  color: rgba(102, 102, 102, 1);
}
.flex-box {
  font-size: 12px;
  color: rgba(102, 102, 102, 1);
}
.flex-content {
  font-size: 12px;
  padding-top: 5px;
  color: rgba(102, 102, 102, 0.8);
}
// vux.class.vux-flexbox
.vux-flexbox {
  text-align: center;
}

.tab-item {
  cursor: pointer;
  font-size: 16px !important;
  letter-spacing: 1px;
}
.button-tab-item {
  border: @button-tab-default-border-color;
}
.vux-button-group {
  width: 70%;
  margin: auto;
  margin-top: 15px;
}
.vux-button-group > a.vux-button-group-current {
  background-color: rgb(55, 174, 252);
}
.copyright {
  font-size: 12px;
  position: absolute;
  bottom: -30%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
 
